<template>
    <view class='order-confirm-index-containter'>
        <view class="order-confirm-index-top-had">
            <view class="order-address-top" @tap="selectAddress">
                <view class="address-top">
                    <span class="name">{{ defaultAddress.receiverName }},</span>
                    <span class="address">{{ defaultAddress.receiverTel }}</span>
                </view>
                <view class="address-bottom">
                    {{
                        defaultAddress.receiverProvince + defaultAddress.receiverCity + defaultAddress.receiverArea +
                        defaultAddress.receiverAddress
                    }}
                </view>
            </view>
            <view>
                <image class="icon_mod" @tap="selectAddress" src="../../static/img/common/icon_mod.png" />
            </view>
        </view>
        <block v-for="(item, index) in arrProductInfo" :key="index">
            <view class="order-confirm-goods-item-containter">
                <view class="order-confirm-goods-item-bg">
                    <image class="order-confirm-goods-item-icon" :src="item.productSquareUrl"></image>
                    <view class="order-confirm-goods-item-info">
                        <view class="order-confirm-goods-item-title">{{ item.productName }}</view>
                        <view class="order-confirm-goods-item-bottom"><span class="red">￥{{
                            item.price
                        }}</span><span>×{{ item.count }}</span>
                        </view>
                    </view>
                </view>
            </view>
        </block>
        <view class="button_2 btn_add" @tap="editAddress">确认修改</view>
    </view>
</template>

<script>
import Big from 'big.js';
import {
    common, order
} from '../../services/index.js';
import Goods from '../components/goods';
import {
    mapState,
} from "vuex";
export default {
    data() {
        return {
            defaultAddress: null,//默认地址
            cartGoodsBottomInfo: {},
            ids: [],//购物车id
            addLists: [],
            priceCount: 0,
            originPriceCountNoExpress: 0,
            isSubmit: false,
            selectAddressId: undefined,
            needExpressPrice: false,
            couponList: [],
            ableList: [],
            selectCouponId: '',
            selectCoupon: {},
            dicountDesc: '',
            currentPayWay: 3,

            arrProductInfo: [],
        }
    },
    components: {
        Goods,
    },
    computed: {
        ...mapState(["mallConfig"]),
    },
    mounted() {
    },
    methods: {
        async addressQuery() {
            uni.showLoading();
            let res = await common.addressQuery();
            if (res.code === 200) {
                if (this.selectAddressId) {
                    let defaultAddress = res.data.find((e) => e.receiverId === this.selectAddressId);
                    if (defaultAddress) {
                        this.defaultAddress = defaultAddress;
                    }
                }
                this.addLists = res.data;
            }
            uni.hideLoading();
        },
        selectAddress() {
            uni.navigateTo({
                url: '/pages/addressManager/index?from=changeAddress',
            })
        },
        onLoad(params) {
            this.getOrderDetail(params.orderNo);
        },
        onShow() {
            let that = this;
            wx.getStorage({
                key: 'selectAddressIdChange',
                success(res) {
                    that.selectAddressId = res.data;
                }
            });
            this.addressQuery();
        },
        onGotoAddAddress() {
            this.selectAddress();
        },
        async getOrderDetail(orderNo) {
            uni.showLoading();
            let res = await order.orderDetail({ orderNo });
            if (res.code === 200) {
                res.data.products.forEach((e) => {
                    e.price = new Big(e.price).div(100);
                });
                this.orderDetail = res.data;
                this.arrProductInfo = res.data.products;
                this.defaultAddress = {
                    receiverName: res.data.receiverName,
                    receiverTel: res.data.receiverTel,
                    receiverProvince: res.data.receiverProvince,
                    receiverCity: res.data.receiverCity,
                    receiverArea: res.data.receiverArea,
                    receiverAddress: res.data.receiverAddress,
                }
            }
            uni.hideLoading();
        },
        async editAddress() {
            let res = await order.editOrderAddress({
                orderNo: this.orderDetail.orderNo,
                receiverName: this.defaultAddress.receiverName,
                receiverTel: this.defaultAddress.receiverTel,
                receiverProvince: this.defaultAddress.receiverProvince,
                receiverCity: this.defaultAddress.receiverCity,
                receiverArea: this.defaultAddress.receiverArea,
                receiverAddress: this.defaultAddress.receiverAddress,
            });
            if (res.code === 200) {
                uni.showToast({
                    title: '修改成功',
                    icon: 'none',
                    duration: 2000
                });
                setTimeout(() => {
                    uni.navigateBack();
                }, 2000);
            } else {
                uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 2000
                });
            }
        }
    }
}
</script>

<style scoped>
.order-confirm-index-containter {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 130rpx;
}


.order-confirm-index-top-had {
    background: #fff;
    height: 148rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    font-size: 30rpx;
    color: #333;
    line-height: 148rpx;
}

.order-address-top {
    flex: 1;
}


.address-top {
    font-size: 26rpx;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 36rpx;
    width: 88%;
    padding: 0 6%;
}

.address-bottom {
    font-size: 22rpx;
    color: rgba(85, 85, 85, 1);
    line-height: 36rpx;
    width: 88%;
    padding: 0 6%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon_mod {
    width: 30rpx;
    height: 30rpx;
    margin-right: 30rpx;
}

.order-confirm-goods-item-containter {
    position: relative;
    width: 100%;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-confirm-goods-item-bg {
    height: 270rpx;
    width: 92%;
    background: #fff;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-confirm-goods-item-icon {
    width: 145rpx;
    height: 145rpx;
}

.order-confirm-goods-item-info {
    width: calc(100% - 274rpx);
    margin-left: 80rpx;
}

.order-confirm-goods-item-title {
    font-size: 24rpx;
    color: #333;
}

.order-confirm-goods-item-bottom {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;

    font-size: 24rpx;
    color: #333;
    line-height: 80rpx;
}

.red {
    font-size: 28rpx;
    font-weight: bold;
    color: rgba(242, 85, 0, 1);
}

.btn_add {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 130rpx;
}
</style>